<!--
 * @Author: ZhaoChenGuang
 * @Date: 2025-01-16 15:55:01
 * @Description: 
-->
<script lang="ts" setup>
import type { VxeGridProps } from '#/adapter/vxe-table';

import { computed } from 'vue';

import { Page, useVbenDrawer } from '@vben/common-ui';
import { formatDate } from '@vben/utils';

import { Button } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { API_URL_PAYROLL_LIST, req } from '#/api/index';

import Info from './components/Info.vue'
import  UploadExcel from './components/UploadExcel.vue';


const [UploadDrawer, uploadDrawerApi] = useVbenDrawer({
  // 连接抽离的组件
  connectedComponent: UploadExcel,
  // placement: 'left',
});

const [InfoDrawer, InfoDrawerApi] = useVbenDrawer({
  // 连接抽离的组件
  connectedComponent: Info,
  // placement: 'left',
});

interface RowType {
  id: string;
  name: string;
  createAt: string;
  updateAt: string;
}

const gridOptions: VxeGridProps<RowType> = {
  checkboxConfig: {
    highlight: true,
    labelField: 'name',
  },
  columns: [
    {
      field: 'name',
      title: '井队名称',
    },

    { field: 'uploadTime', slots: { default: 'time' }, title: '所属月份' },
    {
      field: 'action',
      slots: { default: 'action' },
      title: '操作',
      fixed: 'right',
      width: 100,
    },
  ],
  exportConfig: {},
  height: 'auto',
  keepSource: true,
  proxyConfig: {
    ajax: {
      query: async ({ page }) => {
        return await req.list(API_URL_PAYROLL_LIST, {
          currentPage: page.currentPage,
          pageSize: page.pageSize,
        });
      },
    },
  },
  rowConfig: {
    isHover: true,
  },

  toolbarConfig: {
    custom: true,
    export: true,
    refresh: { code: 'query' },
    zoom: true,
  },
};

const [Grid, tableApi] = useVbenVxeGrid({
  gridOptions,
});
// 格式化时间
const formatTime = computed(() => (time: any) => {
  return formatDate(time, 'YYYY-MM');
});

function openUploadDrawer(placement: any) {
  uploadDrawerApi.setState({ placement }).open();
}

function openInfoDrawer(placement: any, uploadExcel: any) {
  try {
    InfoDrawerApi.setState({ placement })
      .setData({ content: uploadExcel })
      .open();
  } catch {}
}
</script>

<template>
  <Page auto-content-height>
    <Grid table-title="工资列表" table-title-help="提示">
      <template #toolbar-tools>
        <Button class="mr-2" type="primary" @click="openUploadDrawer('right')">
          上传工资
        </Button>
      </template>

      <template #time="{ row }">
        {{ formatTime(row.uploadTime) }}
      </template>

      <template #action="{ row }">
        <Button type="link" @click="openInfoDrawer('right', row.uploadExcel)">
          查看
        </Button>
      </template>
    </Grid>
    <UploadDrawer :callback-func="tableApi.reload" />
    <InfoDrawer :callback-func="tableApi.reload" />
  </Page>
</template>
